import store from '@/store'
import Vue from 'vue'
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
  return originalPush.call(this, location).catch(err => { })
};
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import { GetUserRoutersApi } from "@/request/api"

Vue.use(VueRouter)

const routes = [
  // {
  //   path: "/login",
  //   redirect: "/login"
  // },
  {
    path: '/',
    name: 'mainlayout',
    component: () => import(/* webpackChunkName: "about" */ '../views/layout/MainLayout.vue'),
    redirect: "/home",
    // children: [
    // {
    //   path: "/home",
    //   component: () => import(/* webpackChunkName: "home" */ '../views/HomeView.vue')
    // },
    // {
    //   path: "/customer/customer",
    //   component: () => import(/* webpackChunkName: "customer" */ '../views/customer/Customer.vue')
    // },
    // {
    //   path: "/customer/visit",
    //   component: () => import(/* webpackChunkName: "visit" */ '../views/customer/Visit.vue')
    // },
    // {
    //   path: "/flow/definition",
    //   component: () => import(/* webpackChunkName: "definition" */ '../views/flow/Definition.vue'),
    // meta:{

    // }
    // }
    // ]
  },

  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '../views/login/Login.vue')
  },
  {
    path: '*',
    component: () => import(/* webpackChunkName: "404" */ '../views/404.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})


// 全局守卫
router.beforeEach(async (to, from, next) => {
  // 管理系统常见的两个经典的逻辑：

  // 【重点】：只有next()是放行，里面传了路径就会变成跳转到，跳转到就会重新执行守卫的代码（这个函数）
  const token = localStorage.getItem("edb-authorization-token")
  // 1、如果用户访问登录页面，但是token已经存在，应该跳转到首页
  if (to.path == '/login' && token) {
    next("/")  //跳转到 （就会重新跑路由守卫）
    return
  }
  // 2、如果用户访问的不是登录页面，但是没有token，都应该跳转到登录页面
  if (to.path !== '/login' && !token) {
    next("/login")
    return
  }

  // if(token && vuex中menuData 为0){
  if (token && store.state.userMenuData.menuData.length == 0) {
    // 获取用户的菜单数据
    let GetUserRoutersApiRes = await GetUserRoutersApi()
    console.log("GetUserRoutersApiRes为：", GetUserRoutersApiRes);
    if (!GetUserRoutersApiRes) return
    // 请求到的GetUserRoutersApiRes这个数据，和我们想要的mennuData，结构上不太一样
    // 所以就需要通过它GetUserRoutersApiRes，来生成我们自己想要的mennuData
    let newUserMenuData = [{
      title: "首页",
      path: "/home",
      icon: "dashboard",
    }]
    let ret = GetUserRoutersApiRes.data.map(item => {
      if (item.children) {
        return {
          title: item.meta.title,
          icon: item.meta.icon,
          path: item.path,
          children: item.children.map(sitem => {
            return {
              title: sitem.meta.title,
              path: item.path + "/" + sitem.path
            }
          })
        }
      } else {
        return {
          title: item.meta.title,
          icon: item.meta.icon,
          path: item.path,
        }
      }

    })
    newUserMenuData = [...newUserMenuData, ...ret]
    // 在js环境中获取mutations中方法的格式：
    // store.commit("文件夹名称/方法名"，需要传递的参数)
    // this.$store 这是组件内的写法
    store.commit("userMenuData/changeMenuData", newUserMenuData)
    // console.log(newUserMenuData);
    // 以上 --- 动态生成用户可以看到的菜单栏

    // 以下 --- 动态生成用户可以访问的路由

    // 1、定义一个默认数据
    let newChildrenRoutes = [{
      path: "/home",
      meta: { title: ["首页"] },
      component: () => import(/* webpackChunkName: "home" */ '../views/HomeView.vue')
    }, {
      path: "/profile",
      meta: { title: ["个人中心"] },
      component: () => import(/* webpackChunkName: "home" */ '../views/ProFile.vue')
    }]
    GetUserRoutersApiRes.data.forEach(item => {
      let ret = item.children.map(sitem => {
        return {
          path: item.path + "/" + sitem.path,
          meta: {
            title: [item.meta.title, sitem.meta.title]
          },
          component: () => import(`../views${item.path}/${sitem.name}.vue`)
        }
      })
      newChildrenRoutes = [...newChildrenRoutes, ...ret]
    })
    console.log(newChildrenRoutes);

    // 要把这个生成好的数组添加到mainlayout理由里面的children，作为子路由
    // 动态添加路由：router.addRoute(父路由名称，单个子路由对象)
    newChildrenRoutes.forEach(item => {
      router.addRoute("mainlayout", item)

    })
    // 【重要！！！！！！！！！！】
    // 添加完动态路由要跳转到这个路径
    // 这个to.path一定要出写
    // 如果直接next() ,路由还没有完整,还是个空的。它不确定路由中有没有这个路径。
    // 加上to.path之后，会重新走一遍路由守卫，此时路由添加完毕，可以检查用户能不能访问这个路径
    next(to.path)
    return


  }
  next() //放行
})
export default router
